<%@ tag body-content="scriptless" trimDirectiveWhitespaces="true"  pageEncoding="UTF-8"%>
<%@ attribute name="style" type="java.lang.String" required="false" description="样式"%>

<style>

    .layui-input#searchName{
        height: 100%;
        line-height: 100%;
        border:1px solid #747474;
        border-radius:0px;
        background: inherit;
    }
   /* .layui-input#searchName:hover{
        border-color: #494!important;
    }*/
    .layui-btn#searchBtn{
        height: 34px;
        line-height: 34px;

    }

    #searchResult{
        box-sizing: border-box;
        width: 100%;
        max-height: 150px;
        overflow-y: scroll;
        border:1px solid rgba(61,159,223,0.5);
        display: none;
        padding:10px 5px;
        z-index: 1000;
        background-color:#ececec;
    }
    #searchResult p:hover{
        cursor: pointer;
        background-color: rgba(61,159,223,0.5);
    }
    #searchResult p{
        font-size:12px;
        line-height:22px;
        height:22px;
    }
</style>

<div id="inputLine" style="position:relative;width:450px;display:inline-block; margin-left:30px;height:34px;">
    <div class="layui-inline"  style="width:100%;height:100%;">
        <input onkeyup="searchCustomer();" id="searchName" class="layui-input" autocomplete="off" type="text"
               placeholder="按 用户姓名 / 手机号 / 身份证号 模糊搜索">
    </div>
    <div class="layui-inline" style="  position: absolute;top:0px;right:-55px;width:50px;">
        <button id="searchBtn" class="layui-btn layui-btn-small" onclick="searchCustomer();">查询</button>
    </div>
    <div id="searchResult">
    </div>
</div>

<div style="clear:both;"></div>

<script type="text/javascript">

    window.searchCustomer = function () {
        var searchName = $("#searchName").val();
        if($.trim(searchName)==""){
            $("#searchResult").empty();
            return;
        }

        var top = $("#searchName").css("height");

        if(searchName){
            $.getJSON(
                "${ctx}/customer/findListSearch",
                {
                    customerName:searchName,
                    auto:true
                },
                function (list){
                    $("#searchResult").empty();
                    for(var i=0;i<list.length;i++) {
                        var p = '<p onclick="viewUserData(\'' + list[i].id + '\',\'' + list[i].customerName + '\')">' + '<span class="id" hidden>' + list[i].id + '</span>';
                        p += '&nbsp;&nbsp;姓名: <span class="customerName">' + list[i].customerName + '</span>';
                        //if (list[i].customerMobile != "") {
                            p += '&nbsp;&nbsp;手机号: <span class="customerMobile">' + list[i].customerMobile + '</span>';
                        //}
                       // if (list[i].identifyNo != "") {
                            p += '&nbsp;&nbsp;身份证号: <span class="identifyNo">' + list[i].identifyNo + '</span></p>';
                        //}
                        $("#searchResult").append(p);
                    }
                    $("#searchResult").css({"position":"absolute","left":0,"top":top});
                    $("#searchResult").show();
                }
            );

        }
    };





        var t = setInterval(function() {
            if ($!=undefined) {
                //$("#inputline").attr("style","width: 460px;position: relative;")

                var styleStr = "${style}";
                if ("${style}"!=""){
                    //styleStr = 'background:red;' +
                     //   'border:1px solid blue';
                    styleStr=styleStr.replace(new RegExp(/ /g),'')
                    if (styleStr.charAt(styleStr.length-1)==";") {
                        styleStr = styleStr.substr(0, styleStr.length - 1);
                    }
                    //alert(styleStr)

                    styleStr=styleStr.replace(new RegExp(/:/g),'":"')
                    styleStr=styleStr.replace(new RegExp(/;/g),'";"')
                    styleStr=styleStr.replace(new RegExp(/;/g),',')
                    styleStr=styleStr.replace(new RegExp(/\r\n/g),'')
                    styleStr=styleStr.replace(new RegExp(/\n/g),'')
                    styleStr = '"'+styleStr+'"';
                    //alert(styleStr)

                    $("#inputLine").css(JSON.parse("{"+styleStr+"}"))
                    //console.log(JSON.parse("{"+styleStr+"}"))
                }

                $("body").click(function () {
                    var e = window.event || arguments.callee.caller.arguments[0];
                    if (!$(e.target).is("#searchBtn") && !$(e.target).is("#searchResult") && !$(e.target).is("#searchResult p")) {
                        $("#searchResult").hide();
                    }
                });
                clearInterval(t);
            }
            else {

            }
        },10);



</script>